<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>状态监测</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <link  rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/gray/easyui.css">
    <link  rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="mintor/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="css/assets/css/ace.min.css"/>

    <script type="text/javascript" src="jquery/easyui1.4.2/jquery.min.js" ></script>
    <script type="text/javascript" src="jquery/easyui1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery/easyui1.4.2/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="jquery/extJs.js"></script>

    <script>
        function Tab(num) {
            switch(num) {
                case 1:
                    document.getElementById("d1").style.display = "block";
                    document.getElementById("L1").style.backgroundColor = "#7db4d8";
                    document.getElementById("d2").style.display = "none";
                    document.getElementById("L2").style.backgroundColor = "#eef4f9";
                    document.getElementById("d3").style.display = "none";
                    document.getElementById("L3").style.backgroundColor = "#eef4f9";
                    $("#runningstate").attr("src","mintor/datamonitor/runningstate.jsp");
                    $("#videoshow").attr("src","");
                    break;
                case 2:
                    document.getElementById("d2").style.display = "block";
                    document.getElementById("L2").style.backgroundColor = "#7db4d8";
                    document.getElementById("d1").style.display = "none";
                    document.getElementById("L1").style.backgroundColor = "#eef4f9";
                    document.getElementById("d3").style.display = "none";
                    document.getElementById("L3").style.backgroundColor = "#eef4f9";
                    $("#intelligentperception").attr("src","mintor/datamonitor/intelligentperception.jsp");
                    $("#videoshow").attr("src","");
                    break;
                case 3:
                    document.getElementById("d3").style.display = "block";
                    document.getElementById("L3").style.backgroundColor = "#7db4d8";
                    document.getElementById("d1").style.display = "none";
                    document.getElementById("L1").style.backgroundColor = "#eef4f9";
                    document.getElementById("d2").style.display = "none";
                    document.getElementById("L2").style.backgroundColor = "#eef4f9";
                    $("#videoshow").attr("src","mintor/datamonitor/videoshow.jsp");
                    break ;
            }
        }
    </script>

    <style type="text/css">
        .L1 {
            background-color: #7db4d8;
            cursor: pointer;
            color: #000000;
            font-size: medium;
            font-family: 微软雅黑;
            width: 15%;
        }

        .L2 {
            background-color: #eef4f9;
            cursor: pointer;
            color: #000000;
            font-size: medium;
            font-family: 微软雅黑;
            width: 15%;
        }
    </style>
</head>

<body style="margin-top: 60px;background-color: white;height:800px">

<div>
    <table border=0 cellspacing=0 cellpadding=0 id=secTable style="width: 100%;border-bottom: 5px solid grey;height:40px;">
        <tr height=20 align=center>
            <td height=30px id="L1" class="L1" onclick="Tab(1)">机床实时监控</td>
            <td height=30px id="L2" class="L2" onclick="Tab(2)">传感器实时监控</td>
            <td height=30px id="L3" class="L2" onclick="Tab(3)">现场监控</td>
            <input type="button" class="btn btn-sm btn-primary center" value="返回" onclick="javascript:window.location.href ='mintor/newmenu/cncstatemonitor.jsp';"
                   style="right: 0;height: 35px;position:absolute;">
        </tr>
        </table>
</div>


<div id="d1" class="widget-box" style="padding-bottom:15px;text-align: center;display:block;">
    <iframe id="runningstate" src="mintor/datamonitor/runningstate.jsp" frameborder="no" border="0" width="100%" height="100%" scrolling="auto"></iframe>
</div>

<div id="d2" class="widget-box" style="padding-bottom:15px;text-align: center;display:none;">
    <iframe id="intelligentperception" frameborder="no" border="0" width="100%" height="100%" scrolling="auto"></iframe>
</div>

<div id="d3" class="widget-box" style="padding-bottom:15px;text-align: center;display:none;">
    <iframe id="videoshow" frameborder="no" border="0" width="100%" height="100%" scrolling="auto"></iframe>
</div>

</body>
</html>
